<!--堆叠图-->
<template>
  <div :id="tag" :key="tag" class="_ehl_stack"></div>
</template>
<script>
  export default {
    name: 'ehlStack',
    props: {
      options: { type: Object, required: true, default: () => {} },
    },
    data() {
      return {
        echart: null,
        local: null,
        tag: Math.ceil(Math.random() * 10000),
        deep: {
          color: [
            '#007AFF',
            '#45C9D0',
            '#5C89FF',
            '#715CFF',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            top: 30,
            textStyle: {
              color: '#B4F5FF',
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 45,
              fontSize: 10,
              color: '#B4F5FF',
            },
          },
          yAxis: {
            axisLine: {
              show: true,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
            },
          },
          series: {
            barWidth: '70%',
            lineStyle: { width: 2 },
          },
        },
        light: {
          color: ['#5C89FF', '#7C6AF2', '#39D2C5', '#FF9944', '#FBD85E', '#55ACEE'],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
            align: 'right',
          },
          legend: { top: 30 },
          xAxis: {
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
          },
          yAxis: {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#000',
              },
            },
          },
          series: {
            barWidth: '70%',
            lineStyle: { width: 2 },
          },
        },
        deepBeauty: {
          color: [
            '#7C2DFE',
            '#2DA1FF',
            '#E96C0E',
            '#FEBE12',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            axisPointer: {
              // type: 'cross',
            },
          },
          title: {
            text: this.options.title,
            left: 'left',
            align: 'right',
            textStyle: {
              fontSize: 16,
              color: '#B4F5FF',
            },
          },
          legend: {
            top: 30,
            left: 'left',
            align: 'left',
            textStyle: {
              color: '#B4F5FF',
              fontSize: 14,
            },
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 14,
              //   color: '#B4F5FF',
              color: '#AFC1D5',
            },
          },
          yAxis: {
            axisLine: {
              show: false,
              lineStyle: {
                color: '#B4F5FF',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#3C4353',
              },
            },
          },
          series: {
            barWidth: this.options.barWidth ? this.options.barWidth : '30%',
            lineStyle: { width: 2 },
          },
        },
      }
    },
    watch: {
      options: {
        handler() {
          setTimeout(() => {
            this.update()
          }, 500)
        },
        deep: true,
      },
    },
    mounted() {
      this.init()
    },
    destroyed() {
      this.echart = null
      window.onresize = null
    },
    methods: {
      init() {
        this.echart = this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), { lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
            setTimeout(() => {
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
      update() {
        this.echart.setOption(this.change(), { lazyMode: true })
      },
      change() {
        //变量定义
        let theme =
            this.options.theme === 'deep'
              ? this.deep
              : this.options.theme === 'light'
              ? this.light
              : this.deepBeauty,
          columns = this.options.columns,
          rows = this.options.rows,
          type = this.options.type,
          title = this.options.title ? theme.title : null,
          xAxis = [],
          yAxis = [],
          series = [],
          tooltip = theme.tooltip,
          color = theme.color,
          legend = this.options.legend
            ? this.options.legend
            : { data: [], ...theme.legend },
          columnsKey = Object.keys(columns)
        //循环赋值
        xAxis.push({
          type: 'category',
          data: rows.map(i => {
            return i[columnsKey[0]]
          }),
          ...theme.xAxis,
        })
        columnsKey.slice(1).forEach((key, index) => {
          if (Array.isArray(columns[key])) {
            yAxis.push({ type: 'value', name: null, ...theme.yAxis })
            columns[key].forEach((item, num) => {
              legend.data.push(item)
              series.push({
                name: item,
                yAxisIndex: index,
                type: type[index],
                stack: 'total',
                data: rows.map(i => {
                  return i[key][num]
                }),
                ...theme.series,
              })
            })
          } else {
            yAxis.push({ type: 'value', name: columns[key], ...theme.yAxis })
            legend.data.push(columns[key])
            series.push({
              name: columns[key],
              yAxisIndex: index,
              type: type[index],
              stack: 'total',
              data: rows.map(i => {
                return i[key]
              }),
              ...theme.series,
            })
          }
        })
        let tmp = { color, tooltip, xAxis, yAxis, series, title, legend }
        // console.log(tmp)
        return tmp
      },
    },
  }
</script>
<style lang="less" scoped>
  ._ehl_stack {
    width: 100%;
    height: 100%;
  }
</style>
